<template>
    <view>
        <image style="width: 100%;" src="../../static/common/lgbg.png" mode="widthFix"></image>
        <view class="head">
            <view style="padding: 50rpx;">
                <u-text text="重置密码" size="30" color="#2469f6" bold></u-text>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="account" placeholder="请输入用户名..." v-model="forget.username" color="#2469f6"
                        border="none"
                        customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                        prefixIconStyle="color:#2469f6" fontSize="18">
                        <template slot="suffix">
                			         <u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></u-code>
                            <u-button @tap="getCode" :text="tips" type="success" size="normal"></u-button>
                        </template>
                    </u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-input prefixIcon="fingerprint" placeholder="请输入验证码..." color="#2469f6" border="none"
                        v-model="forget.code" clearable
                 		     customStyle="height:90rpx;background:#eaf2fe;border-radius:25rpx;padding-left:15rpx;padding-right:15rpx;"
                      		placeholderStyle="color:#949494" prefixIconStyle="color:#2469f6" fontSize="18"></u-input>
                </view>
                <view style="margin-top: 60rpx;">
                    <u-button size="large" text="立即重置" color="#2469f6" iconColor="#fff"
                        customStyle="height:90rpx;border-radius:25rpx;" @click="Forget()">
                    </u-button>
                </view>
            </view>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
    import API from '../../util/request.js';
    export default {
        data() {
            return {
                tips: '',
                forget: {
                    username: '', //账号                 
                    code: ''
                },
            }
        },
        onLoad() {},
        methods: {
            codeChange(text) {
                this.tips = text;
            },
            getCode() {
               	if (this.forget.username == '') {
               	    this.$refs.uToast.show({
               	    	type: 'error',
               	    	message: '请输入用户名！',
               	        position: "bottom",
               	    })
               	}else{
               	    if (this.$refs.uCode.canGetCode) {
               	        // 模拟向后端请求验证码
               	        uni.showLoading({
               	            title: '正在获取验证码'
               	        })
               	        uni.request({
               	            url: API.GetPasswordCode() + this.forget.username,
               	            success: (res) => {
               	                if (res.data.code == 200) {
               	                    setTimeout(() => {
               	                        uni.hideLoading();
               	                        // 这里此提示会被this.start()方法中的提示覆盖
               	                        uni.$u.toast('验证码已发送');
               	                      	 // 通知验证码组件内部开始倒计时
               	                        this.$refs.uCode.start();
               	                    }, 2000);
               	                } else {
               	                    setTimeout(() => {
               	                        uni.hideLoading();
               	                        // 这里此提示会被this.start()方法中的提示覆盖
               	                        uni.$u.toast(res.data.msg);
               	                    }, 2000);
               	                }
               	            }
               	        })
               	    
               	    } else {
               	        uni.$u.toast('倒计时结束后再发送');
               	      }
               	}
            },
            change(e) {
                console.log('change', e);
            },
            Forget: function() {
                if (this.forget.username == '') {
                    this.$refs.uToast.show({
                    	type: 'error',
                    	message: '请输入用户名！',
                        position: "bottom",
                    })
                   
                }else if (this.forget.code == '') {
                    this.$refs.uToast.show({
                    	type: 'error',
                    	message: '请输入验证码！',
                        position: "bottom",
                    })
                } else {
                    uni.showLoading({
                        title: '正在重置...'
                    })
                    uni.request({
                        url: API.ResetPassword() + this.forget.username + '&code=' + this.forget.code,
                        success: (res) => {
                            console.log(res)
                            if(res.data.code==200){
                                uni.hideLoading();
                                this.$refs.uToast.show({
                                	type: 'success',
                                	message: res.data.msg,
                                    position: "bottom",
                                	complete() {
                                		uni.navigateTo({
                                		    url:'/pages/account/login'
                                		})
                                	}
                                })
                            }else{
                                uni.hideLoading();
                                this.$refs.uToast.show({
                                	type: 'error',
                                	message: res.data.msg,
                                    position: "bottom",
                                })
                            }
                        }
                    })
                }

            },

        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }

    .head {
        /* padding: 50rpx; */
        width: 100%;
        background-color: #fff;
        position: absolute;
        border-radius: 60rpx 60rpx 0 0;
        margin-top: -110rpx;

    }
</style>
